<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="common/include :: header('新增养修预约')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-post-add">
            <input type="hidden" id="superId" name="superId">
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">上级分类：</label>
                <div class="col-sm-8">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" id="categoryName" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            请选择 <span class="caret"></span>
                        </button>
                        <ul id="treeDemo" class="ztree dropdown-menu"></ul>
                    </div>
                </div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">分类名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="categoryName" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">描述：</label>
				<div class="col-sm-8">
					<textarea class="form-control" name="categoryDesc" id="categoryDesc" required></textarea>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="common/include :: footer" />
    <th:block th:include="common/include :: ztree" /> <!--ztree下拉框树状结构插件-->
	<th:block th:include="common/include :: datetimepicker" />
	<script type="text/javascript">

		var prefix = ctx + "/business/goodsCategory";
		
		function submitHandler() {
	        if ($.validate.form()) {
	        	$.operate.save(prefix + "/add", $('#form-post-add').serialize());
	        }
	    }

	    /*分类下拉框*/
        $.get("/business/goodsCategory/treeData", function (result) {
            // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
            console.log(result.data);
            var setting = {
                callback:{
                    onClick:function (a,b,data) {
                        console.log(data);
                        $('#superId').val(data.id);
                        $('#categoryName').html(data.categoryName);
                        $('#parentId').val(data.id)
                    }
                },
                data: {
                    key:{
                        name:'categoryName'
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: null
                    }
                }
            };

            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
            var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, result.data);
            zTreeObj.expandAll(true);
        })


	</script>
</body>
</html>
